<template>
  <el-menu
      :default-active="route.path"
      class="el-menu-vertical-demo"
      mode="horizontal"
      :router="true"
  >
    <el-menu-item index="/teacher-courses">我的授课</el-menu-item>
    <el-menu-item index="/arrange-exam">考试安排</el-menu-item>
    <el-menu-item index="/teacher-addscore">录入成绩</el-menu-item>
    <el-menu-item index="/teacher-checkscore">查看成绩</el-menu-item>
    <el-menu-item index="/teacher-info">个人中心</el-menu-item>
    <div class="logout" @click="logout">
      <el-button type="warning" circle><el-icon ><SwitchButton /></el-icon></el-button>
      <span style="margin-left:10px;font-size: 13px;color:#888888;">退出登录</span>
    </div>
<!--    <div class="box">-->
<!--      <span style="color: #409EFF" @click="logout">退出登录</span>-->
<!--      <el-icon class="logout" @click="logout"><SwitchButton /></el-icon>-->
<!--    </div>-->

  </el-menu>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {REMOVE_TOKEN} from "@/utils/token";
import {REMOVE_USER} from "@/utils/userInfo";
import {REMOVE_TEACHER} from "@/utils/teacherInfo";

//获取路由对象
const route = useRoute()
const router = useRouter()


const logout = () => {
  ElMessageBox.confirm(
      '您确认退出吗?',
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },

  ).then(() => {
    REMOVE_TOKEN()
    REMOVE_TEACHER()
    router.push('/login')
    ElMessage({
      type: 'success',
      message: '退出成功',
    })
    router.push({path: 'login'})
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消',
    })
  })


}
</script>

<style scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  margin-left: 60%;
}
.logout {
  /*display: flex;*/
  /*align-items: center;*/
  /*justify-content: center;*/
  /*font-size: 32px;*/
  /*color: #409EFF;*/
  display: flex;
  float: right;
  margin-left: 65%;
  align-items: center;
  cursor: pointer;
}
</style>
